import React, { PureComponent } from "react";
import { Form, Input, Button } from "antd";
import { connect } from "react-redux";
import { push, goBack } from "react-router-redux";
import backMailbox from "../../assets/images/backMailbox.png";
import { forgetPassword } from "../../services/api/user";
import style from "./style.less";
import ErrTip from "../ErrTip";
import { errCode } from "../../helper/errCode";
const FormItem = Form.Item;

class ForgetEmail extends PureComponent {
  state = {
    timeStamp: ""
  };

  handleSubmit = e => {
    e.preventDefault();
    const { handleSubmit } = this.props;
    this.props.form.validateFields((err, values) => {
      if (err) return;
      forgetPassword({
        ...values,
        method: "email",
        field: "email",
        value: values.email,
        return_type: "json"
      }).then(data => {
        const response = data.data;
        const flag = String(response.flag);
        if (flag !== "0") {
          console.log(flag, errCode["flag"]);
          this.changeImgCode();
          this.props.form.setFields({
            captcha: {
              value: "",
              errors: [new Error(errCode[flag])]
            }
          });
        } else {
          handleSubmit(values.email, values.captcha);
        }
      });
    });
  };

  changeImgCode = () => {
    let date = new Date();
    let timeStamp = date.getTime();
    this.setState({ timeStamp });
  };

  render() {
    const { timeStamp } = this.state;
    const { getFieldDecorator } = this.props.form;
    return (
      <div className={style.EmailBox}>
        <Form className={style.email_form} onSubmit={this.handleSubmit}>
          <FormItem>
            <div className={style.formItem}>
              <div className={style.EmailWrap}>
                {getFieldDecorator("email", {
                  rules: [
                    {
                      required: true,
                      message: <ErrTip>请输入注册时使用的邮箱</ErrTip>
                    }
                  ],
                  initialValue: ""
                })(
                  <Input
                    className={`${style.formInput} ${style.email}`}
                    placeholder="请输入注册时使用的邮箱"
                  />
                )}
              </div>
            </div>
          </FormItem>
          <FormItem>
            <div className={style.formItem}>
              <div className={style.codeWrap}>
                {getFieldDecorator("captcha", {
                  rules: [
                    {
                      required: true,
                      message: <ErrTip>请输入图形验证码</ErrTip>
                    }
                  ]
                })(
                  <Input
                    className={`${style.formInput} ${style.code}`}
                    placeholder="请输入图形验证码"
                  />
                )}
                <div className={style.imgCode} onClick={this.changeImgCode}>
                  <img src={`/u/captcha?t=${timeStamp}`} alt="图像验证码" />
                </div>
              </div>
            </div>
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              htmlType="submit"
              className={style.mobile_form_button}
            >
              下一步
            </Button>
          </FormItem>
        </Form>
        <div className={style.Moreoperations}>
          <a
            onClick={() => this.props.navigateTo("/login")}
            className={style.backLogin}
          >
            返回登录
          </a>
          <span className={style.vertical}>|</span>

          <a
            onClick={() => this.props.navigateTo("/forgetPassword")}
            className={style.backLogin}
          >
            通过手机找回
            <img src={backMailbox} alt="" className={style.backMailbox} />
          </a>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state, ownProps) => {
  return {};
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    navigateTo: location => {
      dispatch(push(location));
    },
    goBack: () => {
      dispatch(goBack());
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Form.create({})(ForgetEmail));
